import {
  Card,
  Breadcrumb,
  Form,
  Button,
  Radio,
  Input,
  Upload,
  Space,
  Select,
  message,
} from "antd";
import { PlusOutlined } from "@ant-design/icons";
import { Link, useSearchParams, useNavigate } from "react-router-dom";
import "./index.scss";
import ReactQuill from "react-quill-new";
import "react-quill-new/dist/quill.snow.css";
import { useEffect, useState } from "react";
// import { getChannelAPI } from "@/apis/article";
import type { Channel } from "../../apis/article";
import type { PublishForm } from "../../apis/article";
import {
  publishArticleAPI,
  rePublishArticleAPI,
  getArticleByIdAPI,
} from "../../apis/article";
import { UploadFile, RadioChangeEvent } from "antd";
import { useChannel } from "../../hooks/useChannel";

const { Option } = Select;

const Publish = () => {
  //获取频道列表
  const { channelList } = useChannel();

  //提交表单
  const onFinish = (formData: {
    title: string;
    channel_id: number;
    type: number;
    content: string;
  }) => {
    //校验imageType是否等于上传的图片数量
    if (imageList.length !== imageType)
      return message.warning("封面类型和图片数量不匹配");
    // console.log("Success:", publishForm);
    const requestData: PublishForm = {
      title: formData.title,
      channel_id: formData.channel_id,
      // type: formData.type,
      content: formData.content,
      cover: {
        type: formData.type, // 根据实际类型设置 formData.type和imageType都可以吧
        images: imageList.map((item) => {
          if (item.response) {
            return item.response.data.url;
          } else {
            return item.url;
          }
        }), // 实际的图片 URL 数组
      },
    };
    //处理调用不同接口
    if (articleId) {
      console.log("re-create-requestData:", { ...requestData, id: articleId });
      publishArticleAPI({ ...requestData, id: articleId });
    } else {
      console.log("first-create-requestData:", requestData);
      rePublishArticleAPI(requestData);
    }
    navigate("/article");
  };

  //上传图片的状态改变的回调
  const [imageList, setImageList] = useState<UploadFile[]>([]);
  const onUploadChange = (value: {
    file: UploadFile;
    fileList: UploadFile[];
  }) => {
    console.log("1");
    setImageList(value.fileList);
  };

  //上传图片类型切换
  const [imageType, setImageType] = useState(0);
  const onTypeChange = (e: RadioChangeEvent) => {
    console.log("切换图片类型", e, typeof e);
    setImageType(e.target.value);
  };

  //回填数据
  const [searchParams] = useSearchParams();
  const articleId = searchParams.get("id"); //从当前路由
  const [form] = Form.useForm();
  useEffect(() => {
    async function getArticleById() {
      if (!articleId) return;
      const res = await getArticleByIdAPI(articleId);
      //调实例方法，完成回填
      form.setFieldsValue({
        ...res.data,
        type: res.data.cover.type,
      });
      //回填图片列表
      setImageType(res.data.cover.type);
      console.log(res.data);
      setImageList(
        res.data.cover.images.map((url: any) => {
          return { url };
        })
      );
    }
    getArticleById();
  }, [articleId, form]);

  //确认跳转
  const navigate = useNavigate();
  return (
    <div className="publish">
      <Card
        title={
          <Breadcrumb
            separator=">"
            items={[
              {
                title: <Link to="/">首页</Link>,
              },
              {
                title: articleId ? "编辑文章" : "发布文章",
              },
            ]}
          >
            {/* <Breadcrumb.Item>
              <Link to="/">首页</Link>
            </Breadcrumb.Item>
            <Breadcrumb.Item>发布文章</Breadcrumb.Item> */}
          </Breadcrumb>
        }
      >
        <Form
          labelCol={{ span: 4 }}
          wrapperCol={{ span: 16 }}
          initialValues={{ type: imageType }}
          onFinish={onFinish}
          form={form}
        >
          <Form.Item
            label="标题"
            name="title"
            rules={[{ required: true, message: "请输入文章标题" }]}
          >
            <Input placeholder="请输入文章标题" style={{ width: 400 }} />
          </Form.Item>
          <Form.Item
            label="频道"
            name="channel_id"
            rules={[{ required: true, message: "请选择文章频道" }]}
          >
            <Select placeholder="请选择文章频道" style={{ width: 400 }}>
              {channelList.map((item: Channel) => (
                <Option key={item.id} value={item.id}>
                  {item.name}
                </Option>
              ))}
            </Select>
          </Form.Item>

          <Form.Item label="封面">
            <Form.Item name="type">
              <Radio.Group onChange={onTypeChange}>
                <Radio value={1}>单图</Radio>
                <Radio value={3}>三图</Radio>
                <Radio value={0}>无图</Radio>
              </Radio.Group>
            </Form.Item>
            {imageType !== 0 && (
              <Upload
                name="image"
                listType="picture-card" //选择框外观
                className="avatar-uploader"
                showUploadList //显示上传列表
                action="http://geek.itheima.net/v1_0/upload"
                onChange={onUploadChange}
                maxCount={imageType}
                fileList={imageList}
              >
                <div style={{ marginTop: 8 }}>
                  <PlusOutlined />
                </div>
              </Upload>
            )}
          </Form.Item>
          <Form.Item
            label="内容"
            name="content"
            rules={[{ required: true, message: "请输入文章内容" }]}
          >
            {/* 富文本编辑器组件 */}
            <ReactQuill
              theme="snow"
              className="publish-quill"
              placeholder="请输入文章内容"
            />
          </Form.Item>

          <Form.Item wrapperCol={{ offset: 4 }}>
            <Space>
              <Button size="large" type="primary" htmlType="submit">
                发布文章
              </Button>
            </Space>
          </Form.Item>
        </Form>
      </Card>
    </div>
  );
};

export default Publish;
